.success-message {
    text-align: center;
    max-width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.success-message__icon {
    max-width: 75px;
}

.success-message__title {
    color: #3dc480;
    transform: translateY(25px);
    opacity: 0;
    transition: all 200ms ease;
}
.active .success-message__title {
    transform: translateY(0);
    opacity: 1;
}

.success-message__content {
    color: #b8babb;
    transform: translateY(25px);
    opacity: 0;
    transition: all 200ms ease;
    transition-delay: 50ms;
}
.active .success-message__content {
    transform: translateY(0);
    opacity: 1;
}

.icon-checkmark circle {
    fill: #3dc480;
    transform-origin: 50% 50%;
    transform: scale(0);
    transition: transform 200ms cubic-bezier(0.22, 0.96, 0.38, 0.98);
}
.icon-checkmark path {
    transition: stroke-dashoffset 350ms ease;
    transition-delay: 100ms;
}
.active .icon-checkmark circle {
    transform: scale(1);
}
